<template>
  <div class="addgoods">
    <a-card title="发布新品" style="width: 100%">
      <!-- <a slot="extra" href="#">more</a> -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form_box">
        <a-form-model-item label="">
          <div class="form_title">商品详情信息</div>
        </a-form-model-item>
        <a-form-model-item label="商品链接" ref="goods_url" prop="goods_url">
          <div class="display">
            <a-input
              v-model="form.goods_url"
              placeholder="请输入商品链接"
              @blur="
                () => {
                  $refs.goods_url.onFieldBlur();
                }
              " />
            <a-button class="getinfo" type="primary" size="large" @click="doDetectionGoods">
              读取数据
            </a-button>
          </div>
        </a-form-model-item>
        <div v-if="ischack">
          <a-form-model-item label="">
            <div class="display">
              <div class="display">
                <div style="width:157px;text-align: right;margin-right:10px">商品类型: </div>
                <a-select v-model="form.goods_type" placeholder="请选择商品类型" size="large" style="width:200px">
                  <a-select-option value="1">
                    京东自营
                  </a-select-option>
                  <a-select-option value="2">
                    京东拼购
                  </a-select-option>
                  <a-select-option value="3">
                    POP
                  </a-select-option>
                </a-select>
              </div>
              <div class="display">
                <div style="width:105px;text-align: right;margin-right:10px">商品分类: </div>
                <a-select
                  v-model="form.goods_class_id"
                  placeholder="请选择商品分类"
                  size="large"
                  style="width:200px"
                  @change="classchange">
                  <a-select-option :value="item.id" v-for="(item,index) in classList" :key="index">
                    {{ item.class_name }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="display">
                <div style="width:106px;text-align: right;margin-right:10px">商品品牌: </div>
                <a-select
                  v-model="form.brand_id"
                  placeholder="请选择商品品牌"
                  size="large"
                  style="width:200px"
                  show-search
                  :filter-option="filterOption">
                  <div slot="dropdownRender" slot-scope="menu">
                    <v-nodes :vnodes="menu" />
                    <a-divider style="margin: 4px 0;" />
                    <div
                      style="padding: 4px 8px; cursor: pointer;text-align: center;"
                      @mousedown="e => e.preventDefault()">
                      <a-pagination
                        size="small"
                        v-model="current"
                        :pageSize="pagesize"
                        :total="salecount"
                        @change="pageChange" />
                    </div>
                  </div>
                  <a-select-option :value="item.id" v-for="(item,index) in saleList" :key="index">
                    {{ item.brand_name }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="商品主图" prop="goods_img">
            <a-card title="商品展示主图" style="width: 834px">
              <div class="showimg_mian">
                <div class="showimg">
                  <a-upload
                    v-if="form.goods_img==''"
                    name="file"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    list-type="picture-card"
                    :multiple="false"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="handleChange3">
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon type="fund" />
                        <p>
                          请上传商品主图
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <div v-else class="img_box">
                    <img :src="form.goods_img" alt="" srcset="">
                    <a-icon type="close-circle" @click="closeimg(1)" />
                  </div>
                </div>
                <div class="upload_box">
                  <a-upload
                    v-if="videourl===''"
                    name="file"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    @change="handleChange">
                    <!-- :before-upload="beforeUpload" -->
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon :type="loading ? 'loading' : 'play-circle'" />
                        <p>
                          上传视频
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <video v-else class="upvideo" :src="videourl" controls="controls">
                    <!-- <source type="video/mp4">
                  您的浏览器不支持播放! -->
                  </video>
                </div>
              </div>
            </a-card>
            <a-card title="营销长图" style="width: 834px">
              <div class="showimg_mian">
                <div class="showimg">
                  <a-upload
                    v-if="form.marketing_img==''"
                    name="file"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    list-type="picture-card"
                    :multiple="false"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="handleChange4">
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon type="fund" />
                        <p>
                          请上传营销长图
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <div v-else class="img_box">
                    <img :src="form.marketing_img" alt="" srcset="">
                    <a-icon type="close-circle" @click="closeimg(2)" />
                  </div>
                </div>
              </div>
            </a-card>
            <a-card title="商品细节图" style="width: 834px">
              <a-button slot="extra" @click="showeva">
                获取评价图
              </a-button>
              <div class="showgoodsinfo">
                <a-upload
                  name="file"
                  action="https://jfk-api.letuilm.com/api/upload_img"
                  list-type="picture-card"
                  :file-list="fileList"
                  :multiple="true"
                  :before-upload="beforeUpload"
                  @preview="handlePreview"
                  @change="handleChange2">
                  <div v-if="fileList.length < 5">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      上传细节图
                    </div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
              <div>
                <p>*商品主图请控制在2M以内，尺寸为800*800,细节图最多上传5张</p>
                <p>*小程序主尺寸为800*640</p>
                <p>*视频请控制在5MB以内，请使用MP4格式</p>
              </div>
              <a-modal title="商品评价图(最多选择5张)" :visible="evaimgs" :width="750" @ok="handleOk" @cancel="handleCancel">
                <div class="evaimgs_box" ref="evabox" @scroll="Scroll">
                  <div class="choose_box">
                    <div v-if="chooseimged.length===0" style="margin:0 auto;">
                      请选择下方评价图!
                    </div>
                    <div style="display: flex;justify-content:space-around" v-else>
                      <div v-for="(item,index) in chooseimged" :key="index" class="chooseimg">
                        <img :src="item">
                        <a-icon type="close-circle" @click="closechoose(item)" />
                      </div>
                    </div>
                  </div>
                  <a-checkbox-group v-model="chooseimged" :disabled="chooseimged.length>4">
                    <a-row>
                      <a-col :span="8" v-for="(item,index) in imgsList" :key="index">
                        <a-checkbox :value="item">
                          <img :src="item" alt="" srcset="">
                        </a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                  <a-button type="dashed" :loading="loadingbtn" block @click="Scroll">
                    加载更多...
                  </a-button>
                </div>
              </a-modal>
            </a-card>
          </a-form-model-item>
          <a-form-model-item label="京东名称">
            <a-input v-model="form.goods_name" disabled />
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="display">
              <div class="display">
                <div style="width:270px;text-align: right;margin-right:10px">商品原价: </div>
                <a-input v-model="form.goods_price" />
              </div>
              <div class="display">
                <div style="width:200px;text-align: right;margin-right:10px">佣金比例: </div>
                <a-input v-model="form.commission_bl" />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="商品短标题" prop="goods_short_name">
            <a-input v-model="form.goods_short_name" placeholder="限制在25个汉字之内，优质精简标题，概括精华！" />
          </a-form-model-item>
          <a-form-model-item label="商品文案" prop="goods_copywriting">
            <a-textarea
              v-model="form.goods_copywriting"
              :auto-size="{ minRows: 3, maxRows: 6 }"
              placeholder="20-50字精简文案！突出产品亮点、需求痛点、为什么值得购买！"
              allow-clear />
          </a-form-model-item>
          <a-form-model-item label="转载文案">
            <a-textarea
              v-model="form.turn_copywriting"
              :auto-size="{ minRows:6, maxRows: 10 }"
              placeholder="请按右侧规范填写"
              allow-clear />
            <div class="tips">
              例：<br />
              [商品标题]<br />
              京东价：[商品原价]元<br />
              抢购价：[优惠价]元<br />
              优惠：[券面额]元<br />
              京东链接：[商品原始链接]<br />
              优惠券链接：[优惠券链接]<br />
              抢购：[商品推广链接]<br />
              拍2件：231元 4瓶<br />
              拍2件券:http://coupon.m.jd.com/..<br />
              拍5件券:http://coupon.m.jd.com/..<br />
              [推荐文案]<br />
              特别注意>>请认真填写转链文案，不填请留空,<br />
              禁止填写店铺/个人小尾巴!!<br />
            </div>
          </a-form-model-item>
          <a-form-model-item label="朋友圈文案" >
            <div class="emoji_box">
              <a-textarea
                id="emojiInput"
                ref="texttemplate"
                v-model="form.friend_copywriting"
                :auto-size="{ minRows:6, maxRows: 15 }"
                placeholder="请填写朋友圈文案"
                allow-clear />
              <div id="exampleInputEmoji">
                <a-button style="font-size:20px" @click="toogleDialogEmoji">😃</a-button>
                <VEmojiPicker v-show="showDialog" labelSearch="Search" lang="pt-BR" @select="selectEmoji" />
              </div>
            </div>
          </a-form-model-item>

          <a-form-model-item label="商品开始时间" prop="goods_start_time">
            <div>
              <a-radio-group name="radioGroup" v-model="startshow" :default-value="1">
                <a-radio :value="1">
                  此刻
                </a-radio>
                <a-radio :value="2">
                  选择时间
                </a-radio>
              </a-radio-group>
            </div>
            <div v-if="startshow==2">
              <a-date-picker
                v-model="form.goods_start_time"
                :disabled-date="disabledEndDate"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="预告时间"
                :open="endOpen"
                @openChange="handleEndOpenChange" />
              <!-- <a-input v-model="couponform.goods_start_time" placeholder="填写开始时间" /> -->
            </div>
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="form_title">优惠劵信息</div>
          </a-form-model-item>
          <a-form-model-item label="优惠券链接" prop="coupon_url">
            <div class="display">
              <a-input v-model="form.coupon_url" @blur="doDetectionCoupon" placeholder="请输入优惠劵链接" />
              <!-- <a-button class="getinfo" type="primary" size="large" @click="">
                读取数据
              </a-button> -->
            </div>
            <div class="coupon_box">
              <div class="coupon_info" style="margin-top:10px">
                <span>优惠券面额</span>
                <a-input v-model="form.coupon_discount" disabled />
                <span>商品优惠价</span>
                <a-input v-model="form.goods_after_price" disabled />
              </div>
              <div class="coupon_info">
                <span>优惠券总数</span>
                <a-input v-model="form.coupon_all_num" disabled />
                <span>开始时间</span>
                <a-input v-model="coupon_start_time" disabled />
              </div>
              <div class="coupon_info">
                <span>优惠券剩余</span>
                <a-input v-model="form.coupon_surplus_num" disabled />
                <span>到期时间</span>
                <a-input v-model="coupon_end_time" disabled />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="form_title">附加信息</div>
          </a-form-model-item>
          <!-- <a-form-model-item label="推荐理由">
            <a-input v-model="form.reason" placeholder="展示给推广者，告知他们一个心动的理由来推广你提供的商品" />
          </a-form-model-item> -->
          <a-form-model-item label="搜索标签">
            <!-- <a-input v-model="form.search_label" placeholder="请输入优化搜索关键词逗号隔开" /> -->
            <div>
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 5" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                    {{ `${tag.slice(0, 5)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                  {{ tag }}
                </a-tag>
              </template>
              <a-input
                v-if="inputVisible"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm" />
              <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                <a-icon type="plus" /> 新增标签
              </a-tag>
            </div>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="onSubmit" type="primary" size="large" class="subbtn">
              提 交
            </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
  import {
    doDetectionGoods,
    doDetectionCoupon,
    getClassList,
    doAddGoods,
    getGoodsBrand,
    getEvaluateImgs
  } from '@/api/goods'
  import Moment from 'moment'
  import VEmojiPicker from 'v-emoji-picker'
  export default {
    name: 'Addgoods',
    components: {
      VEmojiPicker,
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes
      }
    },
    data () {
      return {
        showDialog: false,
        tags: [],
        inputVisible: false,
        inputValue: '',
        loadingbtn: false,
        chooseimged: [],
        imgsList: [],
        evaimgs: false,
        ischack: false,
        salecount: 0,
        current: 1,
        endOpen: false,
        endValue: null,
        startshow: 1,
        previewVisible: false,
        previewImage: '',
        fileList: [
          // {
          //   uid: '-1',
          //   name: 'image.png',
          //   status: 'done',
          //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          // }
        ],
        goodsinfoimg: [], // 商品细节图
        loading: false,
        videourl: '', // 视频地址
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        },
        form: {
          // id: '',
          goods_url: '', // 商品地址
          goods_type: '', // 商品类型
          coupon_url: '', // 优惠劵地址
          goods_class_id: '', // 商品分类id
          brand_id: '', // 商品品牌id
          goods_img: '', // 商品主图
          marketing_img: '', // 营销长图
          goods_xj_img: '', // 商品细节图
          goods_name: '', // 商品名称
          goods_price: '', // 商品价格
          goods_short_name: '', // 商品短标题
          commission_bl: '', // 佣金比例
          goods_copywriting: '', // 商品文案
          turn_copywriting: '', // 转载文案
          friend_copywriting: '', // 朋友圈文案
          search_label: '', // 搜索标签
          shop_id: '', // 商家id
          shop_name: '', // 商家名称
          goods_start_time: '', // 商品开始时间
          coupon_discount: '', // 优惠劵面值
          goods_after_price: '', // 劵后价
          coupon_start_time: '', // 优惠卷开始时间
          coupon_end_time: '', // 优惠卷结束时间
          coupon_all_num: '', // 优惠劵总数量
          coupon_surplus_num: '', // 优惠劵剩余数量
          reason: '' // 推荐理由
        },
        coupon_start_time: '',
        coupon_end_time: '',
        rules: {
          goods_url: [{
            required: true,
            message: '请输入商品地址',
            trigger: 'blur'
          }],
          goods_start_time: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          goods_img: [{
            required: true,
            message: '请添加商品图',
            trigger: 'blur'
          }],
          goods_short_name: [{
            required: true,
            message: '请填写商品短标题',
            trigger: 'blur'
          }],
          goods_copywriting: [{
            required: true,
            message: '请填写商品文案',
            trigger: 'blur'
          }],
          // turn_copywriting: [{
          //   required: true,
          //   message: '请填写转载文案',
          //   trigger: 'blur'
          // }],
          coupon_url: [{
            required: true,
            message: '请填写优惠卷地址',
            trigger: 'blur'
          }]
          // reason: [{
          //   required: true,
          //   message: '请填写推荐理由',
          //   trigger: 'blur'
          // }],
          // search_label: [{
          //   required: true,
          //   message: '请填写搜索标签',
          //   trigger: 'blur'
          // }]
        },
        saleList: [ // 选择品牌列表
          // {
          //   id: 1,
          //   brand_name: 'haier'
          // }
        ],
        classList: [ // 选择商品分类列表
          // {
          //   id: 1,
          //   class_name: '女装'
          // }
        ],
        classid: '',
        goods_id: '',
        pagesize: 100,
        brand_id: '',
        flag: false,
        page: 1,
        imgscount: 0,
        scrollTop: 0,
        ischeck: false

      }
    },

    computed: {

    },
    created () {
      this.getClassList()
    },
    mounted () {
      //  this.$refs.evabox.addEventListener('scroll', this.Scroll)
    },
    methods: {
      // 表情
      selectEmoji (emoji) {
        var elInput = document.getElementById('emojiInput')
        // console.log(elInput);
        // 根据id选择器选中对象
        var startPos = elInput.selectionStart // input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd // 选中的字符到最后的字符
        // console.log(startPos, " --- ", endPos);
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value
        // 将表情添加到选中的光标位置
        var result =
          txt.substring(0, startPos) + emoji.data + txt.substring(endPos)
        elInput.value = result // 赋值给input的value
        // 重新定义光标位置
        elInput.focus()
        elInput.selectionStart = startPos + emoji.data.length
        elInput.selectionEnd = startPos + emoji.data.length
        this.form.friend_copywriting = result // 赋值
      },
      toogleDialogEmoji () {
        this.showDialog = !this.showDialog
      },
      handleClose (removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag)
        console.log(tags)
        this.tags = tags
      },

      showInput () {
        this.inputVisible = true
        this.$nextTick(function () {
          this.$refs.input.focus()
        })
      },

      handleInputChange (e) {
        this.inputValue = e.target.value
      },

      handleInputConfirm () {
        const inputValue = this.inputValue
        let tags = this.tags
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue]
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: ''
        })
      },

      Scroll (e) {
        // console.log(this.$refs.evabox.scrollTop)
        const ele = e.srcElement ? e.srcElement : e.target
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { // 监听滚动到div底部
          this.loadingbtn = true
          if (this.ischeck === false) {
            this.ischeck = true
            getEvaluateImgs({
              page: this.page,
              goods_id: this.goods_id
            }).then(res => {
              if (res.code === 200) {
                this.page++
                console.log('评价图', res)
                this.imgsList.push(...res.data.data)
                this.ischeck = false
                this.loadingbtn = false
              } else {
                this.$message.info(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      },
      closechoose (item) {
        // console.log(item)
        for (const i in this.chooseimged) {
          if (this.chooseimged[i] === item) {
            this.chooseimged.splice(i, 1)
          }
        }
      },
      handleOk (e) {
        // console.log(this.chooseimged)
        this.fileList = []
        for (const i in this.chooseimged) {
          var obj = {
            uid: i,
            name: 'image.png',
            status: 'done',
            url: this.chooseimged[i]
          }
          this.fileList.push(obj)
        }
        this.evaimgs = false
      },
      showeva () {
        this.evaimgs = true
        getEvaluateImgs({
          page: this.page,
          goods_id: this.goods_id
        }).then(res => {
          console.log('评价图', res)
          this.imgscount = res.data.count
          this.imgsList = res.data.data
          this.scrollTop = this.$refs.evabox.scrollTop
        }).catch(err => {
          console.log(err)
        })
      },
      classchange (val) {
        this.classid = val
        this.getGoodsBrand(val, 1, this.pagesize)
      },
      pageChange (page, pageSize) {
        // console.log(page, pageSize)
        this.getGoodsBrand(this.classid, page, this.pagesize)
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < Moment().subtract('days', 1) || endValue > Moment().add('days', 3)
      },
      handleEndOpenChange (open) {
        this.endOpen = open
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      // 根据分类查询商品品牌
      getGoodsBrand (id, page, size) {
        getGoodsBrand({
            class_id: id,
            page: page,
            pagesize: size
          })
          .then(res => {
            if (res.code === 200) {
              console.log('品牌返回', res)
              if (res.code === 200) {
                this.salecount = res.data.count
                this.saleList = res.data.data
                // this.form.brand_id=
              }
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      closeimg (val) {
        if (val === 1) {
          this.form.goods_img = ''
        } else {
          this.form.marketing_img = ''
        }
      },
      handleCancel () {
        this.previewVisible = false
        this.evaimgs = false
        this.chooseimged = []
      },
      handlePreview (file) {
        // console.log(file)
        if (file.response) {
          this.previewImage = file.response.data.url
        } else {
          this.previewImage = file.url
        }
        this.previewVisible = true
      },
      handleChange2 ({
        fileList
      }) {
        // console.log(fileList)
        this.fileList = fileList
      },
      // 获取分类
      getClassList () {
        getClassList({
            page: 1,
            pagesize: 999999
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('获取分类返回', res)
              this.classList = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 检测优惠劵
      doDetectionCoupon () {
        // this.form.coupon_url =
        //   'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w'
        if (this.form.coupon_url === '') {

        } else {
          doDetectionCoupon({
              coupon_url: this.form.coupon_url
            })
            .then(res => {
              if (res.code === 200) {
                console.log('检测优惠劵返回', res)
                this.form.goods_after_price = this.form.goods_price - res.data.discount
                this.form.coupon_all_num = res.data.batchCount
                this.form.coupon_discount = res.data.discount
                this.form.coupon_start_time = parseInt(res.data.start_time.toString().slice(0, -3))
                this.form.coupon_end_time = parseInt(res.data.end_time.toString().slice(0, -3))
                this.coupon_start_time = Moment(parseInt(res.data.start_time)).format(
                  'YYYY-MM-DD HH:mm:ss')
                this.coupon_end_time = Moment(parseInt(res.data.end_time)).format('YYYY-MM-DD HH:mm:ss')

                this.form.coupon_surplus_num = res.data.num
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
      // 检测商品
      doDetectionGoods () {
        // this.form.goods_url = 'https://item.jd.com/66383243307.html'
        if (this.form.goods_url === '') {

        } else {
          doDetectionGoods({
              goods_url: this.form.goods_url
            })
            .then(res => {
              if (res.code === 200) {
                this.ischack = true
                this.flag = false
                console.log('检测商品返回', res)
                this.goods_id = res.data.goods_id
                this.classid = res.data.class_id
                this.getGoodsBrand(res.data.class_id, 1, this.pagesize)
                this.form.shop_id = res.data.shop_id
                this.form.shop_name = res.data.shop_name
                this.form.goods_name = res.data.goods_name
                this.form.goods_price = res.data.price
                this.form.goods_type = res.data.type.toString()
                this.form.goods_class_id = res.data.class_id
                this.brand_id = res.data.brand_id
                this.form.brand_id = res.data.brand_name
                this.form.goods_img = res.data.goods_img
                for (const i in res.data.goods_xj_img) {
                  if (i > 0 && i < 6) {
                    var obj = {
                      uid: i,
                      name: 'image.png',
                      status: 'done',
                      url: res.data.goods_xj_img[i].url
                    }
                    this.fileList.push(obj)
                  }
                }
              } else {
                this.flag = true
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
      handleChange3 (info) {
        // console.log('info', info)
        this.form.goods_img = `//` + info.file.response.data.url
      },
      handleChange4 (info) {
        // console.log('info', info)
        this.form.marketing_img = `//` + info.file.response.data.url
      },
      handleChange (info) {
        // console.log('info', info)
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        this.videourl = `http://` + info.file.response.data.url
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      onSubmit () {
        // console.log('细节图', this.fileList)
        if (this.fileList.length > 0) {
          var urlStre = ''
          for (var i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].response) {
              if (this.fileList[i].response !== '') {
                urlStre += `http://` + this.fileList[i].response.data.url + ','
              }
            } else {
              urlStre += this.fileList[i].url + ','
            }
          }
          urlStre = urlStre.substring(0, urlStre.length - 1)
          this.form.goods_xj_img = urlStre
          // console.log('相关', this.form.goods_xj_img)
        }
        if (this.startshow === 1) {
          var num = Date.now()
          this.form.goods_start_time = num.toString().slice(0, -3)
        } else {
          this.form.goods_start_time = parseInt(Moment(this.form.start_time).valueOf() / 1000)
          // console.log('this.form.goods_start_time2222', this.form.goods_start_time)
        }
        // this.form.goods_start_time = '1'
        if (typeof this.form.brand_id !== 'number') {
          this.form.brand_id = this.brand_id
        }
        this.form.search_label = this.tags.toString()
        // console.log('this.form.search_label', this.form.search_label)
        console.log('提交表单', this.form)
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            if (this.flag === false) {
              if (this.form.goods_after_price < 0) {
                this.$message.info('对不起!卷后价不能为负!请重新检测优惠卷!')
              } else {
                doAddGoods(this.form).then(res => {
                  if (res.code === 200) {
                    // console.log(res)
                  this.form = {}
                  this.$message.success('新增成功!')
                  this.tags = []
                  this.fileList = []
                  this.coupon_start_time = ''
                  this.coupon_end_time = ''
                } else {
                  this.$message.info(res.msg)
                }
              }).catch(err => {
                console.log(err)
              })
              }
            } else {
              this.$message.info('对不起!该商品已经在推广,请勿重复提交!')
            }
          } else {
            this.$message.info('请检查表单!')
            return false
          }
        })
      }
    }
  }
</script>

<style lang='less' scoped>
  .display {
    display: flex;
  }

  .evaimgs_box {
    height: 750px;
    overflow-y: auto;

    .choose_box {
      width: 100%;
      height: 105px;
      line-height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0px;
      z-index: 9;
      box-shadow: 0px 5px 5px #8080803d;
      border-bottom: 1px solid #8080803d;
      background-color: #fff;

      .chooseimg {
        position: relative;
        border: 1px solid #8080803d;
        background-color: #8080803d;
        border-radius: 8px;
        margin: 0 15px;

        img {
          width: 100px;
          padding: 5px;
        }
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        cursor: pointer;
        display: none;
      }
    }

    .chooseimg:hover {
      .anticon-close-circle {
        display: block;
      }
    }

    /deep/.ant-checkbox {
      display: none !important;
    }

    /deep/.ant-col {
      height: 110px;
    }

    .ant-checkbox-wrapper {
      margin: 10px 5px;
      // box-sizing: border-box;

    }

    /deep/.ant-checkbox-wrapper-checked {
      border: 1px solid #8080803d;
      border-radius: 8px;
      background-color: #8080803d;
    }
  }

  .addgoods {
    .form_box {
      width: 1000px;
      position: relative;

      .emoji_box {
        position: relative;

        #exampleInputEmoji {
          position: absolute;
          bottom: -26px;
          right: 0;

          /deep/.ant-btn:hover {
            background-color: #fff;
          }

          #EmojiPicker {
            position: absolute;
            top: -252px;
            left: 70px;

            /deep/#Categories {
              overflow: hidden;

              .category {
                height: 35px;
                padding: 0px;
              }
            }

            /deep/#Emojis {
              color: aliceblue;
            }

            /deep/#InputSearch {
              display: none;
            }
          }
        }
      }

      .form_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #545454;
        font-weight: bold;
        padding-left: 20px;
        position: relative;
      }

      .form_title:before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 20px;
        margin-top: -10px;
        background: #2073f2;
        border-radius: 5px;
        background-image: linear-gradient(#2073f2, #4a8ef6);
      }

      .getinfo {
        padding: 0px 38px;
        border-radius: 7px;
      }

      .ant-input {
        color: #000;
        height: 40px;
        margin-right: 10px;
      }

      .showimg_mian {
        display: flex;

        .anticon-play-circle {
          font-size: 67px;
        }

        .showimg {
          width: 238px;
          height: 264px;
          margin-right: 20px;

          /deep/.ant-upload {
            width: 238px;
            height: 264px;
            padding: 0px;
          }

          .nogoodsimg {
            // border: 1px solid #ccc;
            text-align: center;

            .no_main {
              width: 150px;
              margin: 66px auto;

              .anticon-fund {
                font-size: 67px;
              }
            }
          }

          img {
            width: 100%;
            height: 100%;
          }
        }

        .img_box {
          position: relative;
          color: white;

          img {
            width: 100%;
            height: 100%;
          }

          .anticon-close-circle {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24px;
            cursor: pointer;
            display: none;
            transition: all 0.3s linear;
          }

          img:hover+.anticon-close-circle {
            display: block;
          }

          .anticon-close-circle:hover {
            display: block;
            transform: rotate(90deg);
          }
        }

        .upload_box {
          /deep/.ant-upload {
            width: 238px;
            height: 264px;
          }

          .upvideo {
            width: 482px;
            height: 264px;
          }
        }
      }

      .coupon_box {
        .coupon_info {
          display: flex;
          text-align: center;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;

          span {
            display: inline-block;
            width: 250px;
            padding: 0px 15px;
            background-color: #fafafa;
          }

          .ant-input {
            border: none;
          }
        }
      }

      .subbtn {
        display: block;
        width: 266px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        font-size: 24px;
        background: #6775fc;
        color: #fff;
        cursor: pointer;
        border: none;
        box-shadow: 0 5px 10px rgba(7, 133, 253, 0.5);
        text-decoration: none;
        margin-left: 400px;
        transition: all 300ms ease;
      }

      .subbtn:hover {
        background: #2d3feb;
        color: #fff;
      }

      .tips {
        position: absolute;
        right: -430px;
        bottom: -104px;
        width: 360px;
        padding: 20px;
        background: #f8fbff;
        color: #878787;
        border-radius: 5px;
        // z-index: 99;
        line-height: 2;
        box-shadow: 0 5px 10px rgba(7, 133, 253, 0.15);
      }
    }
  }
</style>
